<template>
  <!-- <div style="height: 55%; width: 100%; position: absolute; top: 45%"> -->
  <div class="incomBar" style="height: 250px;"></div>
  <!-- </div> -->
</template>
<script>
import Watermark from "@/common/js/watermark"; //加水印
import {
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
} from "@/common/js/storage";
export default {
  name: "incomBar",
  data() {
    return {
      myChart: null,
      name: JSON.parse(getSessionStorage("accountInfo")).waterMark,
    };
  },
  props: {
    incomeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    incomeData(val) {
      var min = Math.min.apply(null, val.yAxis);
      var maxData = Math.max.apply(null, val.yAxis);
      if (val.yAxis) {
        this.genData(val);
        this.getPie(val, maxData);
      }
    },
  },
  mounted() {
    var maxData = Math.max.apply(null, this.incomeData.yAxis);
    var minData = Math.min.apply(null, this.incomeData.yAxis);
    this.myChart = this.$echarts.init(document.querySelector(".incomBar"));
    if (this.incomeData.yAxis) {
      this.genData(this.incomeData);
      this.getPie(this.incomeData, maxData);
    }

    let accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    let substation = accountInfo.areaLvl == 6 ? true : false;
    let h = document.body.scrollHeight;
    if (!substation) {
        h > 2100 ? h = h - 800 : '';
    } else {
        h > 1000 ? h = h - 800 : '';
    }
    Watermark.set(this.name, h);
  },
  methods: {
    genData(val) {
      var datalsit = [];
      if (val.yAxis && val.yAxis.length >= 0) {
        val.yAxis.map((item, index) => {
          let obj = {};
          var label = { color: "" };
          obj["value"] = item;
          if (item < 0) {
            if (item != Math.max.apply(null, val.yAxis)) {
              label = {
                show: true,
                position: "bottom",
                color: "#292f3b",
              };
            } else {
              label = {
                show: true,
                position: "bottom",
                color: "#292f3b",
              };
            }
            var itemStyle = {
              barBorderRadius: [0, 0, 10, 10],
            };
            obj["label"] = label;
            obj["itemStyle"] = itemStyle;
          } else {
            if (item != Math.max.apply(null, val.yAxis)) {
              label = {
                show: true,
                position: "top",
                color: "#292f3b",
              };
            } else {
              label = {
                show: true,
                position: "top",
                color: "#292f3b",
              };
            }
            var itemStyle = {
              barBorderRadius: [10, 10, 0, 0],
            };
            obj["label"] = label;
            obj["itemStyle"] = itemStyle;
          }
          datalsit.push(obj);
        });
      }
      return datalsit;
    },
    getPie(val, maxData) {
      var datalsit = this.genData(val);
      const that = this;

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{b} <br /> {a0}: {c0}万元",
        },
        grid: {
          top: "-30px",
          left: "60px",
          right: "50px",
          bottom: "80px",
        },
        // legend: {
        //        data: ['月收入环比', '年累计收入同比'],
        //        right : '0',
        //    },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          axisLabel: {
            interval: 0,
            rotate: 30,
            color: "#292f3b",
          },
          data: val.xAxis,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            // min: (minData-(minData+maxData1)%2)*2.2,
            max: maxData * 2,
            // interval: 50,
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
              },
            }, //去除网格线
            axisLabel: {
              show: true,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴
              show: true,
              lineStyle: {
                color: "#9399b6",
              },
            },
          },
          {
            type: "value",
            // min: 0,
            splitLine: {
              show: false,
            }, //去除网格线
            // max: maxData*2,
            // // interval: 50,
            axisLabel: {
              // formatter: '{value}',
              show: true,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴
              show: true,
              lineStyle: {
                color: "#9399b6",
              },
            },
          },
        ],
        dataZoom: [
          {
            type: "slider",
            show: true,
            // start:0,
            // end: 20,
            startValue: val.xAxis.length - 12,
            endValue: val.xAxis.length - 1,
            backgroundColor: "#EBEDF3",
            showDataShadow: false,
            borderRadius: [20, 20],
            fillerColor: "#BEC5D8",
            height: 13,
            width: 300,
            left: "30%",
            bottom: 10,
          },
        ],
        series: [
          {
            type: "bar",
            name: "当月完成",
            data: datalsit,
            barWidth: 10,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    fontSize: 12,
                  },
                  rotate: 30,
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#49d6fe" }, //柱图渐变色
                  { offset: 0.5, color: "#47c9fe" },
                  { offset: 0.75, color: "#44b3fd" }, //柱图渐变色
                  { offset: 1, color: "#41a1fd" }, //柱图渐变色
                ]),
              },
              // emphasis: {
              //      barBorderRadius: 30
              //   },
              // color: "#7f92f7",
              // normal: {
              //    color: function(params) {
              //       var c="";
              //       if(params.data.value == maxData){
              //         c='#7ed093'
              //       }else{
              //         c='#7f92f7'
              //       }
              //        return c;
              //        },
              // }
            },
          },
          {
            type: "line",
            name: "年累计收入同比",
            smooth: true,
            yAxisIndex: 1,
            lineStyle: {
              normal: {
                color: "#fbb858", // 线条颜色
              },
            },
            itemStyle: {
              normal: {
                color: "#fbb858",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#fbb858",
                  },
                  formatter: "{c}%",
                },
              },
            },
          },
          {
            type: "line",
            name: "月收入环比",
            smooth: true,
            yAxisIndex: 1,
            lineStyle: {
              normal: {
                color: "#69a7fb", // 线条颜色
              },
            },
            itemStyle: {
              normal: {
                color: "#69a7fb",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#69a7fb",
                  },
                  formatter: "{c}%",
                },
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
      this.myChart.on("datazoom", (params) => {
        params.endValue = this.myChart._model.option.dataZoom[0].endValue;
        params.startValue = this.myChart._model.option.dataZoom[0].startValue;
        this.$eventHub.$emit("incomBarDataZoom", params);
      });
    },
  },
};
</script>

<style>
</style>
